<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <!--socket-->
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <!--vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--elementUI-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="bg1">
    <el-form id="loginFormId" class="login-container" label-position="left"
             label-width="0px" action="/toChat" method="post" @keyup.enter.native="login">
        <h3 style="float: left">请登录</h3>
        <el-link type="warning" href="register.html" style="margin-top: 23px;margin-left: 180px;">没有账号？去注册</el-link>
        <p style="color: red;">{{nameHint}}</p>
        <el-form-item>
            <el-input type="text" v-model="loginForm.account"
                      auto-complete="off" placeholder="账号" name="account"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" v-model="loginForm.password"
                      auto-complete="off" placeholder="密码" name="password"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;border: none" v-on:click="login">登录</el-button>
        </el-form-item>

    </el-form>
</div>

</body>
<script>

    new Vue({
        el: '#bg1',
        data () {
            return {
                loginForm: {
                    account: '',
                    password: ''
                },
                nameHint:'',
            }
        },
        methods: {
            login () {
                // alert("login")
                var _this = this
                axios.post('/login', {
                            'account': this.loginForm.account,
                            'password': this.loginForm.password
                    })
                    .then(resp => {
                        // alert(resp.data);
                        if (resp.data == "200") {
                            //清空表单数据，再跳转到聊天室
                            _this.loginForm={
                                account: '',
                                password: ''
                            }
                            document.querySelector("#loginFormId").submit();
                        }else {
                            this.$alert(resp.data, '错误提示', {
                                confirmButtonText: '确定'
                            })
                        }
                    })
                    .catch(failResponse => {
                    })
            }

        }
    })
</script>

<style>
    *{
        z-index:0;
    }
    [v-cloak] {
        display: none !important;
    }
    #bg1{
        top: 0;
        left: 0;
        margin: 0px;
        padding: 0;
        background: url("http://localhost:8888/assets/bg.jpg") no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: -1;
    }
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

</style>
</html>